<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+44+'px'}"></view>
			<u-navbar @leftClick="$nav(2)" title="优惠券">
			</u-navbar>
		</view>
		
		
		<view v-if="couponList.length>0">
			<view v-for="(item, index) in couponList" :key="index" class="coupon_box">
				<view class="left">
					<view class="left_top">
						<text class="hui" :style="'background:' + colors">惠</text>
						<text class="hui_name">{{item.coupon_name}}</text>
					</view>
					<view class="left_bottom">
						<text> <slot>有效期：</slot>{{item.end_date}}</text>
					</view>
				</view>
				
				<!-- <image src="/static/ysy.png" class="ysy" v-if="item.status == 1"></image> -->
				<view class="right" :style="'background:' + colors">
					<view class="money">{{moneyText(item)}}</view>
					<!-- <text>满{{item.money}}可用</text> -->
					<text class="shiyong" :style="{'color': colors}" @click="jumpNext(item)">去使用</text>
				</view>
			</view>
		</view>
		
		
		<view v-else class="flex-col items-center" style="margin-top: 80rpx;">
			<image src="/static/data_empty.png"></image>
			<text style="color: #c0c4cc;">暂无数据</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colors: '#e54d42',
				couponList: [
					// {
					// 	name: '满400减20',
					// 	dates: '2023-04-09 2023-05-08',
					// 	status: 1,
					// 	money: 400,
					// 	sub: 20
					// }
				],
			};
		},
		onLoad(op) {
			this.couponList = JSON.parse(op.list);
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight
			}
		},
		methods:{
			moneyText(item){
				if(item.coupon_type == 1){
					return '¥' + Number(item.coupon_money).toString();
				}else{
					return item.coupon_discount + '折';
				}
			},
			
			
			jumpNext(item){
				uni.$emit('selectCoupon', item)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
}
.coupon_box {
	display: flex;
	margin: 28upx 28upx;
	box-shadow: 0upx 0upx 10upx #ddd;
	// position: relative;
	border-radius: 10upx;
	overflow: hidden;
	// justify-content: left;
	justify-content: space-between;
}
	
.coupon_box .left {
	width: 70%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 20upx;
	// float: left;
	justify-content: flex-start;
}

.coupon_box .left .hui {
	width: 40upx;
	height: 40upx;
	font-size: 20upx;
	color: #fff;
	background-color: #EC1818;
	border-radius: 8upx;
	line-height: 40upx;
	text-align: center;
	display: inline-block;
	transform: translateY(-5upx);
}

.coupon_box .left .left_top {
	width: 60vw;
	display: block;
	font-size: 26upx;
	font-weight: bold;

}

.left_top .hui_name {
	line-height: 60upx;
	height: 60upx;
	margin-left: 20upx;
	display: inline-block;
}

.left_bottom {
	font-size: 24upx;
	font-weight: bold;
	color: #333;
	// height: 60upx;
	line-height: 60upx;
	white-space: normal; /* 允许换行 */
    word-break: break-all; /* 在任意字符处断行 */
	width: 100%;
}

.coupon_box .right {
	text-align: center;
	// height: 160upx;
	width: 200upx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	// justify-content: center;
	background-color: #A8A8A8;
}

.coupon_box .right .shiyong {
	height: 40upx;
	line-height: 40upx;
	background-color: #fff;
	border-radius: 20upx;
	padding: 0 20upx;
	color: #A8A8A8;
	
}

.coupon_box .right .money {
	font-size: 45upx;
	color: #fff;
}

.coupon_box .right text {
	font-size: 24upx;
	color: #fff;
	height: 40upx;
	line-height: 34upx;
}

.coupon_box .bottom {
	height: 60upx;
	line-height: 60upx;
	display: flex;
	align-content: flex-start;
	font-size: 24upx;
	margin-top: 10upx;
}

.coupon_box .bottom view {
	margin-right: 20upx;
	color: #888;
	font-weight: bold;
}

.ysy {
	width: 80upx;
	height: 80upx;
	position: absolute;
	top: 20upx;
	right: 200upx;
}
</style>
